<template>
  <div class="data">
    <div class="data-left box">
      <div class="section-box">
        <span>实时数据列表</span>
        <a-select
          v-model:value="mixplantChecked.id"
          @change="getRawByLateryByMpId(mixplantChecked.id)"
          style="float: right;width: 140px;margin-right: 12px"
          ref="select">
          <a-select-option v-for="item in mixList" :key="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </div>
      <a-table
        :bordered="false"
        :pagination="false"
        :data-source="rawInfoList"
        :locale="{ emptyText: '暂无数据' }"
        :scroll="{
          x: 'max-content',
          y: setHeight('.data-right', 90) + 'px'
        }"
        :rowKey="record => record.id">
        <a-table-column
          key="mname"
          title="拌合站"
          data-index="mixPlant.name"
          width="105px">
        </a-table-column>
        <a-table-column key="gl1" title="骨料1" data-index="gl1" width="60px">
        </a-table-column>
        <a-table-column key="gl2" title="骨料2" data-index="gl2" width="60px">
        </a-table-column>
        <a-table-column key="gl3" title="骨料3" data-index="gl3" width="60px">
        </a-table-column>
        <a-table-column key="gl4" title="骨料4" data-index="gl4" width="60px">
        </a-table-column>
        <a-table-column key="gl5" title="骨料5" data-index="gl5" width="60px">
        </a-table-column>
        <a-table-column key="gl6" title="骨料6" data-index="gl6" width="60px">
        </a-table-column>
        <a-table-column
          key="cement"
          title="水泥仓"
          data-index="cement"
          width="60px">
        </a-table-column>
        <a-table-column key="water" title="水" data-index="water" width="60px">
        </a-table-column>
        <a-table-column
          key="additive"
          title="外加剂"
          data-index="additive"
          width="70px">
        </a-table-column>
        <a-table-column
          key="flyash"
          title="粉煤灰"
          data-index="flyash"
          width="70px">
        </a-table-column>
        <a-table-column
          key="yield"
          title="产量(方)"
          data-index="yield"
          width="70px">
        </a-table-column>
        <a-table-column
          key="warnId"
          title="是否达标"
          data-index="warnId"
          width="90px">
          <template #default="{ text, record }">
            <div v-if="record.formalId > 0" :style="{ color: text > 0 ? 'red' : 'green' }">
              {{ text > 0 ? '未达标' : '已达标' }}
            </div>
            <div v-else>
              {{  }}
            </div>
          </template>
        </a-table-column>
        <a-table-column
          key="endTime"
          title="生产时间"
          data-index="endTime"
          width="100px">
        </a-table-column>
        <a-table-column
          key="info"
          title="详情"
          data-index="warnId"
          width="60px">
          <template #default="{ text,record }">
            <div>
              <FileTextOutlined @click="getDetailInfo(record)" />
            </div>
          </template>
        </a-table-column>
      </a-table>
    </div>
    <div class="data-right">
      <div>
        <div class="filter-box" style="margin-bottom:16px">
          <span>开始时间</span>
          <a-date-picker
            v-model:value="startTime"
            format="YYYY-MM-DD"
            style="width: 205px"/>
        </div>
        <div class="filter-box">
          <span>结束时间</span>
          <a-date-picker
            v-model:value="endTime"
            format="YYYY-MM-DD"
            style="width: 205px"/>
        </div>
        <a-button
          type="primary"
          :disabled="
            typeof startTime == 'undefined' || typeof endTime == 'undefined'||startTime == null || typeof endTime == null
          "
          class="monbtn"
          @click="getBarInfoBydata(startTime, endTime)">查询</a-button>
      </div>
      <div class="box">
        <vue-echarts :option="barOption" style="width:100%; height: 100%" />
      </div>
    </div>
    <SModal
     :title="'详细信息--'+ detailInfo.pfName"
      width="1200"
      height="356"
      :isShow="showModalInfo.isShow"
      @closed="() => (showModalInfo.isShow = !showModalInfo.isShow)">
      <a-table
        style="flex: 1"
        :bordered="false"
        :data-source="detailInfo.table"
        :pagination="false"
        :locale="{ emptyText: '暂无数据' }"
        :rowKey="record => record.index">
        <a-table-column title="&nbsp;" data-index="cell0" />
        <a-table-column title="骨料1" data-index="cell1">
          <template #default="{ text,record }">
            <div
              v-html="text"
              :style="{
                color:
                  record.index == 6
                    ? detailInfo.eachone[0].cell1 == '-1'
                      ? 'red'
                      : 'rgba(0, 0, 0, 0.65)'
                    : 'rgba(0, 0, 0, 0.65)'
              }"
            ></div>
          </template>
        </a-table-column>
        <a-table-column title="骨料2" data-index="cell2">
          <template #default="{ text,record }">
            <div
              v-html="text"
              :style="{
                color:
                  record.index == 6
                    ? detailInfo.eachone[0].cell2 == '-1'
                      ? 'red'
                      : 'rgba(0, 0, 0, 0.65)'
                    : 'rgba(0, 0, 0, 0.65)'
              }"
            ></div>
          </template>
        </a-table-column>
        <a-table-column title="骨料3" data-index="cell3">
          <template #default="{ text,record }">
            <div
              v-html="text"
              :style="{
                color:
                  record.index == 6
                    ? detailInfo.eachone[0].cell3 == '-1'
                      ? 'red'
                      : 'rgba(0, 0, 0, 0.65)'
                    : 'rgba(0, 0, 0, 0.65)'
              }"
            ></div>
          </template>
        </a-table-column>
        <a-table-column title="骨料4" data-index="cell4">
          <template #default="{ text,record }">
            <div
              v-html="text"
              :style="{
                color:
                  record.index == 6
                    ? detailInfo.eachone[0].cell4 == '-1'
                      ? 'red'
                      : 'rgba(0, 0, 0, 0.65)'
                    : 'rgba(0, 0, 0, 0.65)'
              }"
            ></div>
          </template>
        </a-table-column>
        <a-table-column title="骨料5" data-index="cell5">
          <template #default="{ text,record }">
            <div
              v-html="text"
              :style="{
                color:
                  record.index == 6
                    ? detailInfo.eachone[0].cell5 == '-1'
                      ? 'red'
                      : 'rgba(0, 0, 0, 0.65)'
                    : 'rgba(0, 0, 0, 0.65)'
              }"
            ></div>
          </template>
        </a-table-column>
        <a-table-column title="骨料6" data-index="cell6">
          <template #default="{ text,record }">
            <div
              v-html="text"
              :style="{
                color:
                  record.index == 6
                    ? detailInfo.eachone[0].cell6 == '-1'
                      ? 'red'
                      : 'rgba(0, 0, 0, 0.65)'
                    : 'rgba(0, 0, 0, 0.65)'
              }"
            ></div>
          </template>
        </a-table-column>
        <a-table-column title="水泥" data-index="cell7">
          <template #default="{ text,record }">
            <div
              v-html="text"
              :style="{
                color:
                  record.index == 6
                    ? detailInfo.eachone[0].cell7 == '-1'
                      ? 'red'
                      : 'rgba(0, 0, 0, 0.65)'
                    : 'rgba(0, 0, 0, 0.65)'
              }"
            ></div>
          </template>
        </a-table-column>
        <a-table-column title="水" data-index="cell8">
          <template #default="{ text,record }">
            <div
              v-html="text"
              :style="{
                color:
                  record.index == 6
                    ? detailInfo.eachone[0].cell8 == '-1'
                      ? 'red'
                      : 'rgba(0, 0, 0, 0.65)'
                    : 'rgba(0, 0, 0, 0.65)'
              }"
            ></div>
          </template>
        </a-table-column>
        <a-table-column title="外加剂" data-index="cell9">
          <template #default="{ text,record }">
            <div
              v-html="text"
              :style="{
                color:
                  record.index == 6
                    ? detailInfo.eachone[0].cell9 == '-1'
                      ? 'red'
                      : 'rgba(0, 0, 0, 0.65)'
                    : 'rgba(0, 0, 0, 0.65)'
              }"
            ></div>
          </template>
        </a-table-column>
        <a-table-column title="粉煤灰" data-index="cell10">
          <template #default="{ text,record }">
            <div
              v-html="text"
              :style="{
                color:
                  record.index == 6
                    ? detailInfo.eachone[0].cell10 == '-1'
                      ? 'red'
                      : 'rgba(0, 0, 0, 0.65)'
                    : 'rgba(0, 0, 0, 0.65)'
              }"
            ></div>
          </template>
        </a-table-column>
        <a-table-column title="产量" data-index="cell11" />
        <a-table-column title="拌合时间" data-index="cell12" />
      </a-table>
      <!--warnInfo-->
      <!-- <div
        :style="{
          color: detailInfo.warnInfo == null ? 'green' : 'red',
          margin: '10px 0px 16px'
        }"
      >
        是否合格:{{
          detailInfo.warnInfo == null ? '合格' : detailInfo.warnInfo.describe
        }}
      </div> -->
    </SModal>
  </div>
</template>

<script lang="ts">
import {mixplant, data, yieldhook} from '@/hooks/mix/data'
import {VueEcharts} from 'vue3-echarts'
import SModal from "@/components/SModal/index.vue"
import {setHeight} from "@/utils/tableUtils"
import {FileTextOutlined} from '@ant-design/icons-vue'
import {defineComponent, onBeforeUnmount, onMounted, h, watch, ref} from 'vue'

export default defineComponent({
  setup() {
    let interval: any

    const { mixList, mixplantChecked } = mixplant()

    const {
      getRawByLatery,
      getRawByLateryByMpId,
      getDetailInfo,
      showModalInfo,
      detailInfo,
      rawInfoList
    } = data()
    const startTime: any = ref(undefined)
    const endTime: any = ref(undefined)
    const { lineOption, barOption, getBarInfoBydata } = yieldhook()

    const closeLaterval = () => {
      if (interval != null) clearInterval(interval)
    }

    onMounted(() => {})

    onBeforeUnmount(() => {
      closeLaterval()
    })

    watch(mixList, (mixList: any) => {
      if (mixList != null && mixList.length > 0) {
        getRawByLateryByMpId(mixList[0].id)
        mixplantChecked.value.id = mixList[0].id

        interval = setInterval(() => {
          console.log(mixplantChecked.value.id)
          getRawByLateryByMpId(mixplantChecked.value.id)
        }, 12000)
      }
    })
    return {
      mixList,
      mixplantChecked,
      getRawByLateryByMpId,
      getBarInfoBydata,
      setHeight,
      getDetailInfo,
      showModalInfo,
      detailInfo,
      rawInfoList,
      endTime,
      startTime,
      lineOption,
      barOption
    }
  },
  components: {
    SModal,
    VueEcharts,
    FileTextOutlined
  }
})
</script>

<style lang="scss" scoped>
.data {
  display: flex;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  justify-content: space-between;
  .data-left {
    display: flex;
    flex-direction: column;
    width: 1068px;
    height: 100%;
    .section-box {
      padding: 10px 18px;
      height: 52px;
      box-sizing: border-box;
      > span {
        font-size: 18px;
        font-weight: bold;
      }
    }
    .table-box {
      position: relative;
      flex: 1;
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      .table-box-title {
        line-height: 20px;
        margin-bottom: 10px;
        color: #333333;
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
  .data-right {
    display: flex;
    flex-direction: column;
    width: 524px;
    height: 100%;
    margin-left: 14px;
    > .box {
      flex: 1;
    }
    > div:nth-of-type(n + 2) {
      margin-top: 14px;
    }
  }
}
.filter-box span {
  margin-right: 8px;
}
.monbtn {
  display: block;
  width: 120px;
  position: absolute;
  right: 120px;
  top: 40px;
}
.box {
  background: #fff;
  box-sizing: border-box;
  border: 1px solid #ebedf0;
}
::v-deep .ant-table-thead > tr > th,
::v-deep .ant-table-tbody > tr > td:nth-of-type(n + 2) {
  text-align: center;
}
.font-btn{
  cursor: pointer;
  color: rgb(0, 141, 255);
}
</style>

